<template>
	<view class="content">
			<view class="whead">
				<view class="left logoLeft">
					<image src="../../static/img/logo.png" mode=""></image>
				</view>
				<view class="center logoCenter">
					<view class="searchBox">
						<view class="inp">
							<input type="text" value="" placeholder="搜索你想要的产品" />
						</view>
						<view class="r">
							<image src="../../static/img/sou.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="right">
					取消
				</view>
			</view>
            <view class='searchList'>
				<view class="li">
					<view class="le">
						<image src="../../static/img/hot.png" mode=""></image>
					</view>
					<view class="ce">
						商品搜索记录
					</view>
					<view class="ri">
						<image src="../../static/img/del.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class='searchList'>
				<view class="li">
					<view class="le">
						<image src="../../static/img/hot.png" mode=""></image>
					</view>
					<view class="ce">
						热门搜索记录
					</view>
					<view class="ri">
						<image src="../../static/img/del.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="serchTapBox">
				<view class="tap">联想笔记本</view>
				<view class="tap">联想笔记本</view>
				<view class="tap">联想笔记本</view>
				<view class="tap">联想</view>
				<view class="tap">联想笔记本</view>
				<view class="tap">联想笔记本</view>
				<view class="tap">联想记本</view>
			</view>
			<view class="flxeBt">
				<view class="mai">
					<image src="../../static/img/mai.png" mode="widthFix"></image>
				</view>
				<view class="txt">
					按住说出想要的产品
				</view>
			</view>
    </view>
</template>

<script>
	import "../../static/css/main.css"
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style  lang="less">
	.content {
		text-align: center;
		height: 100%;
		background: #fff;
	}
    .searchList {display: flex;flex-direction: column;padding: 18rpx 40rpx 0rpx 40rpx;
		.li{clear: both; width: 100%; height: auto; overflow: hidden;
			.le{float: left; width: 60rpx; height: 60rpx;
				image{width: 50%; height: 50%;}
			}
			.ce{float: left; width: calc(100% - 160rpx); font-size: 24rpx; color: #666; text-align: left; line-height: 50rpx;}
			.ri{float: right; width: 60rpx; height:60rpx;
				image{width: 50%; height: 50%;}
			}
		}
	}
	.serchTapBox{clear: both; width: 100%; height: auto; overflow: hidden; text-align:left; padding:0 50rpx;
		.tap{width: auto; padding: 10rpx 18rpx; font-size: 24rpx; border-radius: 10rpx; color:#666; display:inline-block; border:1px solid #ddd; margin-top: 10rpx; margin-right: 15rpx;}
	}
	.flxeBt{position: absolute; bottom: 0; left: 0; width: 100%; height: auto;
		.mai{width: 110rpx; height: 110rpx; margin: 0 auto; clear: both;
			image{width: 100%; height: 100%;}
		}
		.txt{clear: both; margin-top:20rpx; text-align: center; width: 100%; height: 60rpx; line-height: 60rpx; background: #fff; border-top:1px solid #ccc; font-size: 24rpx; color:#999}
	}
</style>
